<template>
  <div id="templatemarket"> 
    <div class="scroll">
      <div class="scrollBox">
        <div class="centerImg">
          <img src="../../public/images/5_02.jpg" alt="">
        </div>
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10"
          class="proBox">
          <li v-for="(item,index) in data" class="proDemo">
            <div class="proDemoImg"><a :href="'./gdetail?proId='+item.id"><img :src='data[index].imgSrc' alt=""></a></div>
            <div class="proDemoName">{{ item.proName }}</div>
            <div class="proDemoDown">
              <div class="proDemoPrice">${{ item.proPrice }}</div>
              <div class="sCar"><span class="iconfont icon-icon_shopping_cart"></span></div>
            </div>
          </li>
        </ul>
        <div class="animeOnload" v-if="onload === true">
          加载中
        </div>
        <div v-if="eload === true">
          没有更多了
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import { InfiniteScroll } from 'mint-ui';

export default {
  name: 'templatemarket',
  directives: { InfiniteScroll },
  data: function() {
    return {
      headImg: '',// 头图信息
      data: [], // 商品数据  
      onload: true,
      eload: false,
      pages: 0,
    }
  },
  // vue 实例创建前
  beforeCreate: function() {
    
  },
  // vue 实例创建后
  created: function() {
    
  },
  // 挂载前
  beforeMount: function() {
    
  },
  // 挂载后
  mounted: function() {
    this.getPro(10);
  },
  // 更新前
  beforeUpdate: function() {
    
  },
  // 更新hou
  updated: function() {
    
  },
  // 销毁前
  beforeDestroy: function() {
    
  },
  // 销毁后
  destroyed: function() {
    
  },
  components: {
    
  },
  methods: {
    getPro: function(len) {
      this.pages=1;
      
      this.axios.get('/web'+'/getCateList',{
        params: {
          type: "A",
          page: this.pages,
          length: len,
        }
      }).then(response=>{
        let data = response.data.data;
        let Data = {
          id: '',
          imgSrc: '',
          proName: '', 
          proPrice: '',
          haveStore: '',
        };
        // 设置类别头图
        this.headImg = data[0].pc_img;
        // 初始化商品数据
        for(let i=0;i<data.length;i++){
          Data.id = data[i].pro_id;
          Data.imgSrc = data[i].apic_loc;
          Data.proName = data[i].pro_name;
          Data.proPrice = data[i].pro_bprice;
          if(data[i].pro_store>0) {
            Data.haveStore = true;
          }
          this.data.push(Data);
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    loadMore: function() {
      this.loading = true;
      this.onload = true;
      this.pages++;
      
      setTimeout(() => {
        this.loading = false;
        this.getPro(5);
      }, 1000);
    }
  }
}
</script>

<style lang="less"> 
@import '../style/config.less';

#templatemarket {
  .px2rem(width,1080);
  .px2rem(margin-top,360);
  .px2rem(margin-bottom,190);
  overflow: hidden;
  height: 680px;
  background-color: #f5f6f5;
  
  .scroll {
    .px2rem(width,1120);
    overflow-y: scroll;
    height: 100%;

    .scrollBox {
      .px2rem(width,1080);
      
      .centerImg {
        width: 100%;
        
        img {
          width: 100%;
        }
      }
      
      .proBox {
        display: flex;
        flex-wrap: wrap;
        justify-content: justify-content;
        box-sizing: border-box;
        .px2rem(padding-left,5);
        .px2rem(padding-right,5);
        
        .proDemo {
          .px2rem(width,535);
          .px2rem(height,750);
          margin-bottom: 3px;
          background-color: white;
          
          .proDemoImg {
            width: 100%;
            .px2rem(height,512);
            
            img {
              width: 100%;
              height: 100%;
            }
          }
          
          .proDemoName {
            .px2rem(font-size,40);
            letter-spacing: 2px;
            margin-left: 15px;
            margin-top: 5px;
            margin-bottom: 25px;
          }
          
          .proDemoDown {
            .proDemoPrice {
              float: left;
              .px2rem(font-size,40);
              .px2rem(line-height,70);
              margin-left: 15px;
              color: red;
              font-weight: bolder;
            }
            
            .sCar {
              float: right;
              margin-right: 15px;
              
              span {
                .px2rem(font-size,70);
                color: #f17e62;
              }
            }
          }
        }   
      }
    
      .animeOnload {
        height: 60px;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
</style>
